<template>
	<w-layout showTabbar showNavbar :navBack="false" navTitle="盒柜" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #navRight>
			<view @click="popup.showRule = true" class="">
				说明
			</view>
		</template>
		<template #default>
			<view class="container">
				<view class="public-input-2 px-10 py-12 my-15">
					<up-search 
						placeholder="请输入关键字" 
						v-model="state.keyword"
						clearabled
						bgColor="transparent"
						:showAction="false"
						:color="publicStyles['--color-t1']"
						@change="searchChange"
					></up-search>
				</view>
				<view class="px-50">
					<up-tabs
						@change="tabChange"
						:list="tabs.list" 
						:current="tabs.current"
						lineWidth="14"
						lineHeight="14"
						:lineColor="`url('/static/icon/public/top-fill.png') 100% 100%`"
						:activeStyle="{
							color: publicStyles['--color'],
							fontWeight: 'bold',
							transform: 'scale(1.2)'
						}"
						:scrollable="false"
						itemStyle="height: 60px;"
						:inactiveStyle="{
							'font-size': '32rpx',
						}"
					>
					</up-tabs>
				</view>
				
				<view class="gap-40 mt-40 px-40" style="display: grid;grid-template-columns: repeat(2,1fr);row-gap: 100rpx;">
					<view class="public-card-9 fc px-30 py-30 fc-ac" style="min-height: 418rpx;position: relative;" v-for="(item,index) in state.list" :key="index">
						<view class="" style="position: relative;">
							<image style="width: 218rpx;height: 218rpx;" :src="item.goodslist_imgurl" mode=""></image>
							<view class="fs-24 px-18 py-4" style="position: absolute;bottom: 0;right: 0;z-index:88;background: rgba(0,0,0,0.7);">
								x{{item.prize_num}}
							</view>
						</view>
						<view class="mt-30 fs-24 ellipsis-1">
							{{item.shang_title}} {{item.goodslist_title}}
						</view>
						<view class="mt-15 fs-24 op-70">
							价格&nbsp;¥{{item.goodslist_money}}
						</view>
						<image v-if="item.count == 0" @click="item.count = 1" class="mt-30 ml-auto mr-auto" style="width: 48rpx;height: 48rpx;" src="/static/icon/public/add-fill.png" mode=""></image>
						<view v-else class="mt-10 ml-auto mr-auto">
							<up-number-box 
								:min="0"
								:max="item.prize_num"
								v-model="item.count" 
								@change="valChange($event,item)"
								button-size="36"
								:color="publicStyles['--color']"
								bgColor="transparent"
								inputWidth="15"
								:iconStyle="{
									'color': publicStyles['--color'],
									'background': 'transparent',
								}"
							>
							</up-number-box>
						</view>
						
						<image @click.stop v-if="index%2 == 0" style="width: 670rpx;height: 60rpx;position: absolute;top: 100%;left: -30rpx;" src="/static/icon/public/base-3.png" mode=""></image>
					</view>
				</view>
				<no-more :show="state.list.length == 0"></no-more>
				
				
				<fixed-bottom :bottom="120">
					<template #default>
						<view class="px-40 w-100 h-100 fr-ac">
							<view @click="changeAll" class="fr-ac">
								<up-icon v-if="selectAllCard" name="yuanxingxuanzhongfill" customPrefix="custom-icon" size="18"
									:color="publicStyles['--color']"></up-icon>
								<up-icon v-else name="yuanxingweixuanzhong" customPrefix="custom-icon" size="18"
									:color="publicStyles['--gray-9']"></up-icon>
								<view class="ml-10 op-90">
									全选
								</view>
							</view>
							
							<view class="ml-auto fr-ac">
								<view v-if="state.send_show_is ==  1 && tabs.current != 3" @click="transfer" class="public-btn-6 ml-30 fr-ac-jc color" style="width: 134rpx;height: 60rpx;">
									转赠
								</view>
								<view v-if="state.take_show_is ==  1 && tabs.current != 3" @click="takeGoods" class="public-btn-6 ml-30 fr-ac-jc color" style="width: 134rpx;height: 60rpx;">
									提货
								</view>
								<view v-if="tabs.current != 3" @click="addClock" class="public-btn-6 ml-30 fr-ac-jc color" style="width: 134rpx;height: 60rpx;">
									上锁
								</view>
								<view v-if="tabs.current == 3" @click="deleteClock" class="public-btn-6 ml-30 fr-ac-jc color" style="width: 134rpx;height: 60rpx;">
									解锁
								</view>
							</view>
							
						</view>
					</template>
				</fixed-bottom>
				
				
				<up-popup :show="popup.showRule" @close="popup.showRule = false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-2 px-50 py-20 fc" style="width: 670rpx;min-height: 760rpx;position: relative;">
						<view class="fs-36">
							仓库说明
						</view>
						<view class="mt-80" style="max-height: 400rpx;overflow: scroll;line-height: 1.8;">
							<view class="" style="line-height: 1.8;">
								<up-parse :content="state.rule"></up-parse>
							</view>
						</view>
						<view @click="popup.showRule = false;" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								知道了
							</view>
						</view>
					</view>
				</up-popup>
				
				
				
				<up-popup :show="popup.showTransfer" @close="popup.showTransfer = false" mode="bottom" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="fc-ac px-50" style="position: relative;min-height:750rpx;background: linear-gradient(to bottom, #17404D 0%, #001524 100%);">
						<view class="w-100" style="position: absolute;top: 0;left: 0;height: 2px;background: linear-gradient(to right, #184250 0%, #4EB5C8 25% , #E4FBFF 50% , #4EB5C8 75% , #184250 100%);"></view>
						<view class="color pt-60 fs-36 t-c">
							赠送确认
						</view>
						
						<template v-if="!popup.showTransferConfirm">
							<scroll-view class="mt-60" style="width: 650rpx;" scroll-x="true" >
								<view class="fr-ac">
									<view class="mr-40 fr-ac" v-for="(item,index) in selectAllList" :key="index">
										<image style="width: 80rpx;height: 80rpx;" :src="item.goodslist_imgurl" mode=""></image>
										<view class="ml-15 flex-1">
											<view class="ellipsis-1 op-90">
												{{item.goodslist_title}}
											</view>
											<view class="fr-ac mt-10">
												<view class="color">
													¥{{item.goodslist_money}}
												</view>
												<view class="ml-20">
													<cut-corner :arrow="3" clipSize="8rpx">
														<view class="color fr-ac-jc fs-24" style="width: 42rpx;height: 36rpx;background-color: #215665;">
															x{{item.count}}
														</view>
													</cut-corner>
												</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
							<view class="op-50 fs-24 mt-30 w-100 u-border-bottom pb-45" style="border-color: var(--gray-line) !important;">
								共{{allnumber}}件物品，合集价值{{allprice}}精粹
							</view>
							<view class="fr-ac mt-45 w-100">
								<view class="">
									被送人ID
								</view>
								<view class="public-input-1 px-30 py-20 fr-ac-jsb flex-1 ml-50" style="color: #fff;">
									<input v-model="state.gift_user_id" class="flex-1 fs-26" type="text" placeholder="请输入被送人ID" />
								</view>
							</view>
						</template>
						
						<template v-if="popup.showTransferConfirm">
							<view class="w-75 mt-100">
								<cut-corner :arrow="3" clipSize="30rpx" width="100%" height="100%">
									<view class="w-100 fr-ac px-30 py-30" style="background-color: #17424F;">
										<image style="width: 112rpx;height: 112rpx;" :src="state.gift_user_info.headimg" mode=""></image>
										<view class="ml-25">
											<view class="fs-32">
												{{state.gift_user_info.nickname}}
											</view>
											<view class="fs-32 op-70 mt-20">
												ID {{state.gift_user_info.id}}
											</view>
										</view>
									</view>
								</cut-corner>
								<view class="op-50 mt-30">
									一旦转赠成功不可退货，请谨慎操作！
								</view>
							</view>
						</template>
						
						<view class="fr-ac gap-40 w-100 mt-auto">
							<view @click="popup.showTransfer = false;" class="public-btn-7 transition py-25 t-c mb-60 flex-1">
								<view class="op-90 fs-32">
									取消
								</view>
							</view>
							<view @click="popupTransferConfirm" class="public-btn-4 transition py-25 t-c mb-60 flex-2">
								<view class="text-color-b fs-32">
									确认
								</view>
							</view>
						</view>
					</view>
				</up-popup>
				
				<payment
					:show="PaymentPopup.show" 
					type="tihuo"
					:take_goods="PaymentPopup.take_goods"
					@callback="callback"
					@close="closePaymentPopup"
				></payment>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		debounce
	} from '@/common/common'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		get_parse,
		warehouse_index,
		warehouse_movein,
		warehouse_remove,
		user_verify,
		gift_goods,
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		get_parseApi(16)
		get_warehouse_index()
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const selectAllList = computed(()=>{
		return state.list.filter(item => item.count > 0)
	})
	const selectAllCard = computed(()=>{
		let result = state.list.every(item => item.count == item.prize_num)
		return result 
	})
	const allnumber = computed(()=>{
		let num = 0
		state.list.forEach(item => {
			num += item.count
		})
		return num
	})
	const allprice = computed(()=>{
		let num = 0
		state.list.forEach(item => {
			num += (item.count * item.goodslist_money * 10)
		})
		return num
	})
	
	
	const page = reactive({
		scrollTop:0
	})
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:1,
				name:'赏品',
			},
			{
				id:2,
				name:'预售',
			},
			{
				id:3,
				name:'卡册',
			},
			{
				id:4,
				name:'保险柜',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
		initData()
		get_warehouse_index()
	}
	
	// 搜索
	const searchChange = debounce(function(e){
		console.log(e)
		initData()
		get_warehouse_index()
	})
	
	const state = reactive({
		list:[],
		page:1,
		limit:15,
		last_limit:15,
		
		keyword:'',
		
		rule:'',
		
		yunfei: {
			free_post: 0,
			post_money: 0
		},
		send_show_is: 0,
		take_show_is: 0,
		
		gift_user_id: '', // 被送人ID
		gift_user_info: '', // 被送人信息
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	
	
	const popup = reactive({
		showRule:false,
		showTransfer:false,
		showTransferConfirm:false
	})
	
	// 转赠
	async function transfer(){
		if (selectAllList.value.length <= 0){
			return uni.$u.toast('请先选择要转赠的赏品')
		}
		popup.showTransfer = true
		popup.showTransferConfirm = false
	}
	async function popupTransferConfirm(){
		if(!popup.showTransferConfirm){
			// 第一次确认
			if(!state.gift_user_id){
				return uni.$u.toast('请输入被送人ID')
			}
			const res = await user_verify({
				gift_user_id: state.gift_user_id,
			})
			state.gift_user_info = res
			popup.showTransferConfirm = true
			return 
		}else{
			// 二次确认
			let gift_detail = selectAllList.value.map(item => {
				return {
					prize_code: item.prize_code,
					goods_type: tabs.list[tabs.current].id,
					number: item.count
				}
			})
			const res = await gift_goods({
				gift_user_id: state.gift_user_id,
				gift_detail: JSON.stringify(gift_detail)
			})
			popup.showTransfer = false
			popup.showTransferConfirm = false
			initData()
			await get_warehouse_index()
			uni.$u.toast('转赠成功！')
		}
	}
	
	async function get_parseApi(type){
		const res = await get_parse({
			type
		})
		state.rule = res
	}
	
	// 获取列表
	async function get_warehouse_index(type){
		const res = await warehouse_index({
			type: tabs.list[tabs.current].id,
			keyword: state.keyword
		})
		let newarr = []
		res.data.map(_val => {
			let arr = _val.orderlist.map(item => {
				item.count = 0
				item.select = false
				return item
			})
			newarr = newarr.concat(arr)
		})
		state.list = newarr
		
		state.yunfei = res.yufei
		state.send_show_is= res.send_show_is
		state.take_show_is = res.take_show_is
	}
	function valChange(e,item){
		item.count = e.value
	}
	// 全选
	function changeAll(){
		if(selectAllCard.value) {
			state.list.forEach(item => {
				item.count = 0
				item.select = false
			})
		} else {
			state.list.forEach(item => {
				item.count = item.prize_num
				item.select = true
			})
		}
	}
	
	// 上锁
	async function addClock(){
		if (selectAllList.value.length <= 0){
			return uni.$u.toast('请先选择要上锁的赏品')
		}
		let recovery_info = selectAllList.value.map(item => {
			return {
				prize_code: item.prize_code,
				number: item.count
			}
		})
		const res = await warehouse_movein({
			recovery_info: JSON.stringify(recovery_info)
		})
		initData()
		await get_warehouse_index()
		uni.$u.toast('上锁成功！')
	}
	// 解锁
	async function deleteClock(){
		if (selectAllList.value.length <= 0){
			return uni.$u.toast('请先选择要解锁的赏品')
		}
		let recovery_info = selectAllList.value.map(item => {
			return {
				prize_code: item.prize_code,
				number: item.count
			}
		})
		const res = await warehouse_remove({
			recovery_info: JSON.stringify(recovery_info)
		})
		initData()
		await get_warehouse_index()
		uni.$u.toast('解锁成功！')
	}
	
	// 提货
	async function takeGoods(){
		if (selectAllList.value.length <= 0){
			return uni.$u.toast('请先选择要提货的赏品')
		}
		PaymentPopup.take_goods = selectAllList.value.map(item=>{
			return {
				...item,
				goods_type: tabs.list[tabs.current].id,
			}
		})
		openPaymentPopup()
		
	}
	
	
	// 支付相关
	const PaymentPopup = reactive({
		show: false,
		take_goods: {}
	})
	async function openPaymentPopup(){
		PaymentPopup.show = true
	}
	function closePaymentPopup(){
		PaymentPopup.show = false
	}
	// 支付回调
	async function callback(order_num){
		initData()
		await get_warehouse_index()
		uni.$u.toast('发货成功')
		closePaymentPopup()
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
	
	::v-deep .u-number-box__minus,.u-number-box__plus{
		background-color: transparent !important;
	}
</style>